<template>
	<up-upload
		:fileList="fileList"
		@afterRead="afterRead"
		@delete="deletePic"
		name="6"
		width="330rpx"
		height="224rpx"
	>
	
		<image v-if="img&&id" class="img" :src="img" mode="widthFix"></image>
		<view class="up-img-box1" v-else-if="fileList.length==0&&tag==1">
			<image class="up-img-icon1" src="/static/img/serve/zheng.png"
			mode="widthFix"></image>
			<view class="up-img-text1">
				上传正面照
			</view>
		</view>
		<view class="up-img-box1" v-else-if="fileList.length==0&&tag==2">
			<image class="up-img-icon1" src="/static/img/serve/fan.png"
			mode="widthFix"></image>
			<view class="up-img-text1">
				上传反面照
			</view>
		</view>
		<view class="up-img-box1" v-else-if="fileList.length==0&&tag==3">
			<up-icon name="plus" color="#D9D9D9" size="28"></up-icon>
			<view class="up-img-text1">
				上传图片
			</view>
		</view>
	</up-upload>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		defineProps,
		defineEmits
	} from "vue"
	const props=defineProps({
		tag:{
			type:String,
			default:'1'
		},
		img:{
			type:String,
			default:''
		},
		id:{
			type:String,
			default:''
		}
	})
	const emits=defineEmits(['uploadSucess'])
	const {
		proxy
	} = getCurrentInstance()
	const fileList = ref([])
	// 新增图片
	const afterRead = async (event) => {
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  let lists = [].concat(event.file);
	  let fileListLen = fileList.value.length;
	  lists.map((item) => {
	    fileList.value.push({
	      ...item,
	      status: 'uploading',
	      message: '上传中',
	    });
	  });
	  for (let i = 0; i < lists.length; i++) {
	    const result = await uploadFilePromise(lists[i].url);
		console.log('result: ', result)
	    let item = fileList.value[fileListLen];
	    fileList.value.splice(fileListLen, 1, {
	      ...item,
	      status: 'success',
	      message: '',
	      url: result,
	    });
	    fileListLen++;
	  }
	};
	
	const uploadFilePromise = (url) => {
	  return new Promise((resolve, reject) => {
	    let a = uni.uploadFile({
	      url: `${proxy.$BASE_URL}/api/Common/upload`,
	      filePath: url,
		  header:{
			  "token":uni.getStorageSync("token"),
		  },
	      name: 'file',
	      formData: {
	        user: 'test',
	      },
	      success: (res) => {
	        setTimeout(() => {
				const fullurl=JSON.parse(res.data).data.fullurl
				emits('uploadSucess',fullurl)
	          resolve(fullurl);
	        }, 1000);
	      },
	    });
	  });
	};
	// 删除图片
	const deletePic = (event) => {
	  fileList.value.splice(event.index, 1);
	};
</script>

<style scoped lang="scss">
	.img{
		width: 330rpx;
		height: 224rpx;
	}
	.up-img-box1{
		margin-top: 10rpx;
		width: 330rpx;
		height: 224rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3F3F3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.up-img-icon1{
			width: 146rpx;
			height: 96rpx;
		}
		.up-img-text1{
			margin-top: 14rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 48rpx;
		}
	}
</style>